<div id="container">
    <div id="top">
        <iframe id="previewIframe" src="/demo/{{ $component->slug }}/index.html" title="Preview Iframe"></iframe>
        <div>this is the top</div>
    </div>
    <div id="dragbar"></div>
    <div id="bottom">
        <div id="bottom-left">
            <div class="bottom-left-menu">
                @foreach($component->componentTypes as $key => $type)
                    <button class="btn {{ $key == 0 ? 'active' : '' }}" data-key="{{ $type['framework'] }}">
                        @if($type['framework'] === 'vue')
                            <svg t="1746584925820" class="icon" viewBox="0 0 1186 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4925" width="24" height="24"><path d="M869.52386204 159.15885416H1052.78178049L594.63698399 949.45862779 136.4921875 159.15885416h350.48076905L594.63698399 342.41677261 700.01028734 159.15885416h169.5135747z" fill="#41B883" p-id="4926"></path><path d="M136.4921875 159.15885416l458.14479649 790.29977362L1052.78178049 159.15885416h-183.25791845L594.63698399 633.33871848 317.45938184 159.15885416H136.4921875z" fill="#41B883" p-id="4927"></path><path d="M317.45938184 159.15885416L594.63698399 635.62944258 869.52386204 159.15885416h-169.5135747L594.63698399 342.41677261 486.97295655 159.15885416H317.45938184z" fill="#35495E" p-id="4928"></path></svg>
                        @endif
                        @if($type['framework'] === 'react')
                            <svg t="1746585431449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9489" width="24" height="24"><path d="M512 431.36c43.946667 0 79.786667 35.84 79.786667 80.64 0 42.666667-35.84 78.933333-79.786667 78.933333S432.213333 554.666667 432.213333 512c0-44.8 35.84-80.64 79.786667-80.64M314.453333 853.333333c26.88 16.213333 85.76-8.533333 153.6-72.533333-22.186667-25.173333-43.946667-52.48-64.426666-81.066667a968.533333 968.533333 0 0 1-102.4-15.36c-21.76 91.306667-13.653333 154.026667 13.226666 168.96m30.293334-244.906666l-12.373334-21.76c-4.693333 12.373333-9.386667 24.746667-12.373333 36.693333 11.52 2.56 24.32 4.693333 37.546667 6.826667l-12.8-21.76m279.04-32.426667l34.56-64-34.56-64c-12.8-22.613333-26.453333-42.666667-38.826667-62.72C561.92 384 537.6 384 512 384s-49.92 0-72.96 1.28c-12.373333 20.053333-26.026667 40.106667-38.826667 62.72L365.653333 512l34.56 64c12.8 22.613333 26.453333 42.666667 38.826667 62.72 23.04 1.28 47.36 1.28 72.96 1.28s49.92 0 72.96-1.28c12.373333-20.053333 26.026667-40.106667 38.826667-62.72M512 289.28c-8.106667 9.386667-16.64 19.2-25.173333 30.72h50.346666c-8.533333-11.52-17.066667-21.333333-25.173333-30.72m0 445.44c8.106667-9.386667 16.64-19.2 25.173333-30.72h-50.346666c8.533333 11.52 17.066667 21.333333 25.173333 30.72M709.12 170.666667c-26.453333-16.213333-85.333333 8.533333-153.173333 72.533333 22.186667 25.173333 43.946667 52.48 64.426666 81.066667 34.986667 3.413333 69.546667 8.533333 102.4 15.36 21.76-91.306667 13.653333-154.026667-13.653333-168.96m-29.866667 244.906666l12.373334 21.76c4.693333-12.373333 9.386667-24.746667 12.373333-36.693333-11.52-2.56-24.32-4.693333-37.546667-6.826667l12.8 21.76m61.866667-300.8c62.72 35.84 69.546667 130.133333 43.093333 240.213334 108.373333 32 186.453333 84.906667 186.453334 157.013333s-78.08 125.013333-186.453334 157.013333c26.453333 110.08 19.626667 204.373333-43.093333 240.213334-62.293333 35.84-147.2-5.12-229.12-83.2-81.92 78.08-166.826667 119.04-229.546667 83.2-62.293333-35.84-69.12-130.133333-42.666666-240.213334-108.373333-32-186.453333-84.906667-186.453334-157.013333s78.08-125.013333 186.453334-157.013333c-26.453333-110.08-19.626667-204.373333 42.666666-240.213334 62.72-35.84 147.626667 5.12 229.546667 83.2 81.92-78.08 166.826667-119.04 229.12-83.2M728.746667 512c14.506667 32 27.306667 64 37.973333 96.426667 89.6-26.88 139.946667-65.28 139.946667-96.426667s-50.346667-69.546667-139.946667-96.426667c-10.666667 32.426667-23.466667 64.426667-37.973333 96.426667M295.253333 512c-14.506667-32-27.306667-64-37.973333-96.426667-89.6 26.88-139.946667 65.28-139.946667 96.426667s50.346667 69.546667 139.946667 96.426667c10.666667-32.426667 23.466667-64.426667 37.973333-96.426667m384 96.426667l-12.8 21.76c13.226667-2.133333 26.026667-4.266667 37.546667-6.826667-2.986667-11.946667-7.68-24.32-12.373333-36.693333l-12.373334 21.76m-123.306666 172.373333c67.84 64 126.72 88.746667 153.173333 72.533333 27.306667-14.933333 35.413333-77.653333 13.653333-168.96-32.853333 6.826667-67.413333 11.946667-102.4 15.36-20.48 28.586667-42.24 55.893333-64.426666 81.066667M344.746667 415.573333l12.8-21.76c-13.226667 2.133333-26.026667 4.266667-37.546667 6.826667 2.986667 11.946667 7.68 24.32 12.373333 36.693333l12.373334-21.76m123.306666-172.373333C400.213333 179.2 341.333333 154.453333 314.453333 170.666667c-26.88 14.933333-34.986667 77.653333-13.226666 168.96a968.533333 968.533333 0 0 1 102.4-15.36c20.48-28.586667 42.24-55.893333 64.426666-81.066667z" fill="#00BCD4" p-id="9490"></path></svg>
                        @endif

                        @if($type['framework'] === 'blade')
                            <svg t="1746605257082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4947" width="24" height="24"><path d="M1020.39936 521.088c-6.784-7.616-100.544-125.44-117.056-145.472a29.184 29.184 0 0 0-34.752-14.912c-10.176 1.472-128.832 21.504-142.592 23.808s-22.464 7.872-14.016 19.776l102.72 145.984-310.016 74.624L258.03136 211.2a29.248 29.248 0 0 0-34.176-18.688c-22.336 0.896-193.472 15.104-205.632 16.192s-25.6 6.4-13.376 35.328 206.528 449.152 211.904 461.376a41.6 41.6 0 0 0 52.48 24.128c33.792-8.128 150.976-38.848 214.976-55.68 33.792 61.504 102.848 186.176 115.584 204.096 17.024 23.872 28.736 19.904 54.912 11.968 20.416-6.4 319.488-114.176 332.8-119.68s21.76-9.536 12.8-23.104c-6.4-9.92-85.568-116.032-126.912-171.52l139.648-37.376c12.8-3.392 14.208-9.536 7.424-17.216zM456.62336 636.8c-3.712 0.768-177.408 42.56-186.688 44.8s-9.28 1.024-10.304-2.112S53.10336 250.88 50.28736 245.568s-2.688-9.536 0-9.536 164.032-14.528 169.728-14.784 5.12 0.896 7.168 4.544L458.73536 627.2c4.032 6.4 1.6 8.768-2.112 9.536z m489.728 92.096c2.752 4.352 5.504 7.168-3.2 10.304s-293.952 99.776-299.52 102.4-9.92 3.2-17.024-7.168-99.904-171.52-99.904-171.52l302.336-79.232c7.488-2.368 9.92-3.968 14.656 3.584s99.84 137.152 102.4 141.568z m19.2-215.424c-6.784 1.472-117.824 29.12-117.824 29.12l-90.624-125.056c-2.56-3.584-4.672-7.232 1.664-8.064s109.504-19.584 114.176-20.608a11.2 11.2 0 0 1 14.4 5.568c5.696 7.808 84.224 107.52 87.168 111.168s-2.112 6.4-8.896 7.616z" fill="#E87537" p-id="4948"></path></svg>
                        @endif
                        <span>{{ $type['framework'] }}</span>
                    </button>
                @endforeach
            </div>

            @foreach($component->componentTypes as $key => $type)
                <div id="tab-content{{ $type["framework"] }}" class="tab-content {{ $type['framework'] === 'vue' ? 'active' : '' }}">
                    <pre><code class="language-javascript"></code></pre>
                </div>
            @endforeach
        </div>
        <div id="vdragbar"></div>
        <div id="bottom-right">
            <div class="bottom-right-menu">
                <button class="btn active" data-key="description">Description</button>
                @if($component["component_tree"])
                    <button class="btn" data-key="component_tree">component tree</button>
                @endif
                @if($component["demo_data"])
                    <button class="btn" data-key="demo_data">Demo data</button>
                @endif
            </div>

            <div class="bottom-content-container">
                <div id="description" class="active">
                    {!! $component["description_html"] !!}
                </div>

                @if($component["component_tree"])
                    <div id="component_tree"></div>
                @endif
                @if($component["demo_data"])
                    <div id="demo_data"></div>
                @endif
            </div>
        </div>
    </div>
</div>
